<template>
  <div class="orderExportList bWH p24 wp100 hp100">
    <div class="crumbs flex_start">
      <span class="crumbs_active">数据报表</span>
      <img src="@/assets/img/customer/crumbs_next.png" alt="返回" class="pub_imgSize16 ml8" />
      <span class="ml8">出库单导出列表</span>
    </div>
    <div class="hc40 mt16">
      <el-table ref="multipleTable" size="mini" :data="currentPageData" tooltip-effect="dark" class="wp100 hc48">
        <el-table-column label="文件" show-overflow-tooltip prop="fileName" />
        <el-table-column label="操作" show-overflow-tooltip prop="contact" :width="`${$f * 100}px`">
          <template slot-scope="{ row }">
            <el-button type="text" class="pub_button public_1EB398_btn" size="mini" @click="downloadFile(row)">下载</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <PageEmptyData />
        </template>
      </el-table>
      <div class="pub_pageination flex_center mt18">
        <el-pagination background :page-size="pageSize" :current-page.sync="currentPage" :total="total" layout="total,prev, pager, next,sizes" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </div>
    </div>
  </div>
</template>
<script>
import { saveAs } from 'file-saver';
import tableFun from '@/mixin/tableFun.js';
export default {
  mixins: [tableFun],
  data() {
    return {
      dataList: [],
      pageSize: 100,
      currentPage: 1
    };
  },
  computed: {
    total() {
      return this.dataList.length;
    },
    // 当前页数据
    currentPageData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.dataList.slice(startIndex, endIndex);
    }
  },
  created() {
    this.getDataList();
  },
  methods: {
    //获取表格数据
    async getDataList() {
      this.dataList = (await this.$excelDB.getItem('outOrder')) || [];
    },
    downloadFile(row) {
      let blobData = new Blob([row.blobData], { type: 'application/octer-stream' });
      saveAs(blobData, row.fileName);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置为第一页
      this.$emit('pagination-change', {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      });
    },
    // 当前页码改变时触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit('pagination-change', {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      });
    }
  }
};
</script>
